import React, { lazy, Suspense } from 'react';
import { Switch, Route, Redirect } from "react-router-dom";
import TabBar from './components/TabBar';
const Movies = lazy(() => import('./movies/Index'));
const Video = lazy(() => import('./video/Index'));
const Mini = lazy(() => import('./mini/Index'));
const Show = lazy(() => import('./show/Index'));
const Mine = lazy(() => import('./mine/Index'));

const Index = () => {
    return (
        <>
            <Switch>
                <Suspense fallback={<div>loading...</div>}>
                    <Redirect from="/home" to="/home/movies" exact></Redirect>
                    <Route path="/home/movies">
                        <Movies />
                    </Route>
                    <Route path="/home/video">
                        <Video />
                    </Route>
                    <Route path="/home/mini">
                        <Mini />
                    </Route>
                    <Route path="/home/show">
                        <Show />
                    </Route>
                    <Route path="/home/mine">
                        {
                            localStorage.getItem("token") ? <Mine /> : <Redirect to={{ pathname: "/login", state: { url: "/home/mine" } }} ></Redirect>
                        }
                    </Route>
                </Suspense>
            </Switch>
            <TabBar />
        </>
    );
}

export default Index;